<template>
  <div>
    <el-menu
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#333333"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="users"
          ><i class="el-icon-menu"></i><span>用户列表</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="roles"
          ><i class="el-icon-menu"></i><span>角色列表</span></el-menu-item
        >
        <el-menu-item index="rights"
          ><i class="el-icon-menu"></i><span>权限列表</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-shopping-bag-1"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="goods"
          ><i class="el-icon-menu"></i><span>商品列表</span></el-menu-item
        >
        <el-menu-item index="params"
          ><i class="el-icon-menu"></i><span>分类参数</span></el-menu-item
        >
        <el-menu-item index="categories"
          ><i class="el-icon-menu"></i><span>商品分类</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="orders"
          ><i class="el-icon-menu"></i><span>订单列表</span></el-menu-item
        >
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="reports"
          ><i class="el-icon-menu"></i><span>数据报表</span></el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
// import  {getMenus}  from '../api/index'
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 获取左侧菜单列表
    // async  initGetMenus() {
    //   let {data,meta:{status}}=    await getMenus()
    //     if(status!=200) return  this.$message.error('请求失败')
    //         this.menuList=data
    // }
  },
  // created() {
  //   this.initGetMenus()
  // }
};
</script>

<style scoped>
.el-menu {
  box-sizing: border-box;
  border: none;
}

/* .el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 1000px;
} */
.el-submenu .el-menu-item {
  padding: 0;
}
</style>